<!DOCTYPE html>
<html>
<head>
<title>Kobold Stat Calculator</title>

<!-- favicon -->
<link rel="shortcut icon" href="/public/images/favicon.png">

<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>

<!-- Jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!-- JQuery UI -->
<script src="/public/jqueryUI-modifiers/js/jquery-ui-1.10.0.custom.min.js"></script>
<link href="/public/jqueryUI-modifiers/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet">

<!-- Jquery plugins -->
<script src="/public/javascripts/jqueryPlugins/jquery.transit.min.js"></script>

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="/public/stylesheets/reset.css">
<link rel="stylesheet" type="text/css" href="/public/stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="/public/stylesheets/header.css">
<link rel="stylesheet" type="text/css" href="/public/stylesheets/kobold.css">
<link rel="stylesheet" type="text/css" href="/public/stylesheets/modifiers.css">
<link rel="stylesheet" type="text/css" href="/public/stylesheets/level-skills.css">

<!-- Custom javascripts -->
<script src="/public/javascripts/main.js"></script>

</head>

<body>
    <div id="centerSite">
        <img id="header" src="/public/images/header.png" alt="Kobold Tribes - stat calculator" />
        
        <div id="modifiers">
            <ul class="title">
                <li>Level/Skills</li>
                <li>Items</li>
                <li>Buffs</li>
            </ul>
            
            <div class="modifiersBorder"></div>
            <div class="content">
                <div id="levelSkillsPage">
                    <div id="level">
                        <label>Level:<span id="varLevel">1</span></label>
                        <div id="levelSlider"></div>
                    </div>
                    <ul id="skills">
                        <li>
                            <label class="highlightedText">Remaining skill points:<span id="varRemainingPoints">0</span>/<span id="varTotalSkillPoints">0</span></label>
                        </li><!--
                        --><li id="varCooking">
                            <label>Cooking:<span class="editSkillLevel">0</span></label>
                            <div class="incrementLevel">
                                <div class="upOne"></div><div class="downOne"></div>
                            </div>
                            + <div class="varExternalModifier">0</div>
                            = <div class="varTotal">0</div>
                        </li><!--
                        --><li id="varForestry">
                            <label>Forestry:<span class="editSkillLevel">0</span></label>
                            <div class="incrementLevel">
                                <div class="upOne"></div><div class="downOne"></div>
                            </div>
                            + <div class="varExternalModifier">0</div>
                            = <div class="varTotal">0</div>
                        </li><!--
                        --><li id="varMining">
                            <label>Mining:<span class="editSkillLevel">0</span></label>
                            <div class="incrementLevel">
                                <div class="upOne"></div><div class="downOne"></div>
                            </div>
                            + <div class="varExternalModifier">0</div>
                            = <div class="varTotal">0</div>
                        </li><!--
                        --><li id="varForaging">
                            <label>Foraging:<span class="editSkillLevel">0</span></label>
                            <div class="incrementLevel">
                                <div class="upOne"></div><div class="downOne"></div>
                            </div>
                            + <div class="varExternalModifier">0</div>
                            = <div class="varTotal">0</div>
                        </li><!--
                        --><li id="varArtisan">
                            <label>Artisan:<span class="editSkillLevel">0</span></label>
                            <div class="incrementLevel">
                                <div class="upOne"></div><div class="downOne"></div>
                            </div>
                            + <div class="varExternalModifier">0</div>
                            = <div class="varTotal">0</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modifiersBorder"></div>
        </div>
        
        <div id="kobold-main">
            <img src="public/images/kobold-large.png" alt="Kobold" />
            <div id="kobold-equipment">
                <div class="equipmentSlot" title="Main Hand"></div>
                <div class="equipmentSlot" title="Off-Hand"></div>
                <div class="equipmentSlot" title="Armor"></div>
            </div>
        </div>
    </div>
</body>

</html>